<template>
  <div>
    <div class="search-box">
      <el-form :inline="true" :model="selectData" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="selectData.nickName" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="角色">
      <el-select v-model="selectData.role" placeholder="请选择角色" >
        <el-option label="全部" :value="0" />
        <el-option 
        v-for="item in data.roleList"
        :key="item.roleId"
        :label="item.roleName" 
        :value="item.roleId" />
      </el-select>
    </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-box">
      <el-table :data="data.list" border style="width: 100%" max-height="250">
        <el-table-column prop="id" label="ID" width="120" />
        <el-table-column prop="nickName" label="姓名" width="120" />
        <el-table-column prop="role"  label="角色">
          <template #default="scope" >
              <el-button
                link
                type="primary"
                v-for="item in scope.row.role"
                :key="item.role"
                size="small"
              >
              {{ item.roleName }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column   label="操作">
          <template #default="scope" >
              <el-button
                link
                type="primary"
                size="small"
                @click="changeUser(scope.row)"
              >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="data.isShow"  title="编辑信息">
    <el-form :model="data.active">
      <el-form-item label="姓名" label-width="50px">
        <el-input v-model="data.active.nickName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="角色" label-width="50px">
        <el-select multiple v-model="data.active.role"  placeholder="请选择角色">
          <el-option 
            v-for="item in data.roleList"
            :key="item.roleId"
            :label="item.roleName" 
            :value="item.roleId" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.isShow = false">取消</el-button>
        <el-button type="primary" @click="updataUser">
          更改
        </el-button>
      </span>
    </template>
  </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive,watch } from "vue";
import { getUserList, getRoleList } from '../../../request/api';
import { InitData, userListIlk } from '../../../type/usersView';

/** 查询数据和表格数据 */
let data = reactive(new InitData());
let selectData = data.selectData;


/** 生命周期 挂载  */
onMounted(() => {
    getUser();
    getRole();
});
/** 获取数据 用户 角色 */
const getUser = () => {
    getUserList().then((res) => {
    data.list = res.data
  });
} 
const getRole = () => {
    getRoleList().then(res => {
      data.roleList = res.data
    });
}
  
/** 查询，重新渲染数据 */
const onSubmit = () => {
    /** 定义arr来接收筛选后的数据  */
  let arr: userListIlk[] = [];
  if (selectData.nickName || selectData.role) {
    if (selectData.nickName) {
      arr = data.list.filter((v) => v.nickName.indexOf(selectData.nickName) != -1 );
    }
    if (selectData.role) {
      arr = (selectData.nickName ? arr : data.list).filter(v => v.role.find((item) =>  item.role === selectData.role ))
     }
  } else {
    arr = data.list;
  }
  data.list = arr;
}
/** 点击 操作 事件 */
const changeUser = function(scope: userListIlk) {
  data.isShow = true;
  data.active.nickName = scope.nickName;
  data.active.role = scope.role.map((value:any) => value.role || value?.roleId) ;
  data.active.id = scope.id;
}
/** 保存更改的数据 */
const updataUser = () => {
  /** obj 用于接收管理员的id */  
  let obj: any = data.list.find((value) => value.id === data.active.id);
  console.log(obj);
  obj.nickName = data.active.nickName;
  obj.role = data.roleList.filter(v => data.active.role.indexOf(v.roleId) !== -1);

  /** 重新渲染修改后的表格数据 */
  data.list.forEach((item, index) => {
    if (item.id === obj.id) {
      data.list[index] = obj;
    }
    data.isShow = false;
  })
}
/** 监听当用户为空时，角色的情况渲染 */
watch([()=> selectData.nickName, () => selectData.role], () => {
  getUser();
})


</script>

<style lang="scss" scoped>
</style>